<template>
  <div class="about mbm">
    <div class="box">
      <h3>QiarAI 智能语音助手</h3>
      <div v-if="last != null" class="update">
        <div class="mrm">
          <span class="new">发现新版本 v{{last.version}}</span>
          <br />
          <span class="old">当前版本 v{{local.version}}</span>
          <br />
          <a href="//ai.iqiar.com/update?from=QiarAI" target="_blank">点此了解更新内容<a-icon type="link" /></a>
        </div>
        <div v-if="progress == 100" class="progress">
          <a-button   @click="doReload" type="primary" icon="poweroff">更新完毕！点此重启</a-button>
        </div>
        <div v-else class="progress">
          <div v-if="progress > 0">
            <a-progress type="circle" :percent="progress" :width="60" :hidden="progress == 0" />
          </div>
          <div v-else-if="progress == 0 && hideUpdate">开始更新...请勿断网或断电！</div>
          <div v-else>
            <a-button type="default" @click="doUpdate">立即更新</a-button>
          </div>
        </div>
      </div>
      <div v-else-if="local != null" class="last">
        {{local.content}}
        <br />
        当前版本 v{{local.version}}
        
      </div>
      <div v-else class="last">
        <a-icon type="loading" class="mrm" />检查版本中...
      </div>
      <div class="iqiar mtm">人工智能小众社群 iQiar.COM 开源项目 <a href="//ai.iqiar.com/?from=QiarAI" target="_blank">[ 进入官网<a-icon type="link" /> ]</a></div>
      <div class="feedback mts">
        <a href="//iqiar.com/feedback?from=QiarAI" target="_blank">问题反馈<a-icon type="link" /></a>
      </div>
      <div class="copyright mts">
        QiarAI
        <br />版权所有 2020 iQiar.COM. 保留所有权利。
        <br />本项目主要采用Golang语言开发，感谢其他开源项目：
        <a href="//github.com/tarm/serial" target="_blank">serial</a>,
        <a href="//github.com/gin-gonic/gin" target="_blank">gin</a>,
        <a href="//github.com/youpy/go-wav" target="_blank">go-wav</a>,
        <a href="//github.com/gorilla/websocket" target="_blank">websocket</a>,
        <a href="//github.com/inconshreveable/go-update" target="_blank">go-update</a>,
        <a href="//cn.vuejs.org/" target="_blank">vuejs</a>,
        <a href="//github.com/vueComponent/ant-design-vue" target="_blank">ant-design</a>
      </div>
      <div class="other mts">
        <a href="//ai.iqiar.com/agreement?from=QiarAI" target="_blank">QiarAI 服务条款</a>
        <br />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      local: null,
      last: null,
      progress: 0,
      reload: {},
      hideUpdate: false
    };
  },
  mounted() {
    this.localVersion();
    this.showProgress(0);
  },
  methods: {
    localVersion() {
      this.$api.setting.getVersion().then(res => {
        this.local = res;
        if (res.last != null) {
          this.last = res.last
        }
      });
    },
    doUpdate() {
      this.hideUpdate = true;
      this.$api.setting.doUpdateVersion().then(() => {
        //this.local = res;
        this.showProgress(1);
      });
    },
    showProgress(add) {
      let _that = this;
      this.$api.setting.getProgress().then(res => {
        if (res.progress == 100) {
          _that.progress = res.progress;
        } else if (res.progress + add > 0 && res.progress <= 100) {
          var interval = setInterval(function() {
            if (_that.progress < 100) {
              _that.$api.setting
                .getProgress()
                .then(re => {
                  _that.progress = re.progress;
                  if (re.completed) {
                    clearInterval(interval);
                  }
                })
                .catch(() => {
                  clearInterval(interval);
                });
            } else {
              clearInterval(interval);
            }
          }, 1000);
        }
      });
    },
    doReload() {
      this.$api.setting.doReload().then(res => {
        this.reload = res;
        this.$store.commit('SET_TOKEN', {})
        this.$api.auth.autoLogin()
      });
    }
  }
};
</script>

<style lang="less" scoped>
.update {
  display: flex;
  align-items: center;
  .new {
    color: #ff0000;
  }
  .old {
    font-size: 12px;
  }
}
.copyright {
  font-size: 12px;
}
.progress {
  /deep/ span {
    font-size: 12px;
  }
}
.other {
  font-size: 12px;
}
</style>